<template>
  <div class="catalogue">
    <div class="breadcrumb">
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="font-size: 0.2rem"
      >
        <el-breadcrumb-item :to="{ path: '/homePage/homes' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          $route.query.isInForm ? "通知通告" : $route.query.name
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="title" v-if="list.length">
      <div
        style="cursor: pointer"
        v-for="item in list"
        :key="item.id"
        @click="toParticular(item)"
      >
        {{ item.title }}
      </div>
    </div>
    <div v-else style="font-size: 0.6rem">没有找到您要查找的内容！</div>
    <div class="pagination">
      <!-- 分页器
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
         -->
      <el-pagination
        :current-page.sync="pageNum"
        :page-size="pageSize"
        layout=" total, prev, pager, next"
        :total="total"
        @current-change="getTiteLsit"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Catalogue",
  components: {},

  data() {
    return {
      page: 1,
      list: [],
      pageNum: 1,
      pageSize: 5,
      total: 0,
    };
  },

  created() {},
  mounted() {
    this.getTiteLsit();
  },
  methods: {
    async getTiteLsit(pager = 1) {
      this.pageNum = pager;
      const { pageNum, pageSize } = this;
      if (this.$route.query.isInForm) {
        let InFormRes = await this.$API.receptionist.reqGetInForm({
          pageNum,
          pageSize,
        });
        if (InFormRes.status == 200) {
          this.list = InFormRes.data.records;
          this.total = InFormRes.data.total;
        }
      } else {
        if (this.$route.query.id) {
          let titleId = this.$route.query.id;
          let results = await this.$API.receptionist.newsByColumnId({
            columnId: titleId,
            pageNum,
            pageSize,
          });
          if (results.status == 200) {
            this.list = results.data.records;
            this.total = results.data.total;
          }
        } else {
          let datas = {
            name: this.$route.query.name,
            pageNum,
            pageSize,
          };
          let result = await this.$API.receptionist.reqGetNewList(datas);
          if (result.status == 200) {
            this.list = result.data.records;
            this.total = result.data.total;
          }
        }
      }

      this.$bus.$on("getTiteLsit", async (obj) => {
        console.log(obj);
        let res = await this.$API.receptionist.newsByColumnId({
          columnId: obj.id,
          pageSize,
          pageNum,
        });
        if (res.status == 200) {
          this.list = res.data.records;
          this.total = res.data.total;
        }
      });
      this.$bus.$on("getInfrom", async () => {
        let InFormRes = await this.$API.receptionist.reqGetInForm({
          pageNum,
          pageSize,
        });
        if (InFormRes.status == 200) {
          this.list = InFormRes.data.records;
          this.total = InFormRes.data.total;
        }
      });
    },
    // 前往详情页面
    async toParticular(row) {
      if (this.$route.query.isInForm) {
        console.log(row);
        this.$router.push({
          path: "particular",
          query: {
            id: row.id,
            title: row.title,
            creator: row.author,
            releaseTime: row.expirationDate,
            article: row.article,
            isInForm: true,
            expirationState: row.expirationState,
            file: row.file,
            fileName: row.fileName,
          },
        });
      } else {
        if (row.privacy == 2) {
          this.$prompt("请输入密码", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /\S/,
            inputErrorMessage: "密码不能为空",
            inputType: "text",
          })
            .then(async ({ value }) => {
              let data = {
                id: row.id,
                pwd: value,
              };
              let result = await this.$API.receptionist.isNewsPrivacy(data);
              if (result.status == 200) {
                let time =
                  row.releaseTime.slice(0, 11) + row.releaseTime.slice(11, 19);
                this.$router.push({
                  path: "particular",
                  query: {
                    title: row.title,
                    creator: row.creator,
                    releaseTime: time,
                    article: result.data,
                    fatherTitle: this.$route.query.name,
                    fatherTitleId: this.$route.query.id,
                  },
                });
              } else {
                this.$message({
                  type: "info",
                  message: "密码错误",
                });
              }
            })
            .catch(() => {});
        } else {
          let data = {
            id: row.id,
          };
          let results = await this.$API.receptionist.isNewsPrivacy(data);
          if (results.status == 200) {
            let timer =
              row.releaseTime.slice(0, 11) + row.releaseTime.slice(11, 19);
            this.$router.push({
              path: "particular",
              query: {
                title: row.title,
                creator: row.creator,
                releaseTime: timer,
                article: results.data,
                fatherTitle: this.$route.query.name,
                fatherTitleId: this.$route.query.id,
              },
            });
          }
        }
      }
    },
  },
  watch: {},
  computed: {},
};
</script>

<style lang="scss" scoped>
.catalogue {
  // height: 10rem;
  .breadcrumb {
    margin: 20px 0px 40px 20px;
  }
  .title {
    font-size: 0.3rem;
    div {
      margin: 20px 0px 0px 50px;
      color: #20528f;
      font-weight: 700;
    }
    div:hover {
      color: black;
    }
  }
  .pagination {
    margin-top: 40px;
    text-align: center;
  }
}
</style>
